<template>
	<view style="margin-bottom: 10rpx;" @click="interior">
		
	
	   <scroll-view style="height: 100vh;" scroll-y="true" @scroll="scrollBegin">
		  <view >
		  	<image style="width: 100%;height: 500rpx;"
		  	 :src="userinfo.pyqBackground" @click="updatePyqBackgrond"></image>
		  </view>
		  <view >
		  	
		  	<image  style="width: 120rpx;height: 120rpx;
		  	float: right;margin-right: 20rpx;margin-top: -100rpx;border-radius: 0rpx;" 
		  	:src="userinfo.imgHead"></image>
		  	
		  	<view>
		  		<text style="float: right;margin-top: -10rpx;">{{userinfo.name}}</text>
		  	</view>
		  	
		  </view>
		   <view style="margin-right: 25rpx;" v-for="item in pyqList">
			   
			   
			   
			   <view style="display: flex;margin-left: 18rpx;margin-top: 60rpx;" >
			   			   <view  @click="hidePraiseComment">
							   <image  @click="goUserHome" :src="item.imgHead" style="width: 110rpx;height: 110rpx;margin-left: 10rpx;margin-right: 20rpx;border-radius: 2rpx;"></image>
						   </view>
			   			   <view class="assistant_ly" >
			   			     	<text style="flex-direction: inherit;color: #87CEFA;font-size: 24rpx;font-family: unset;">{{item.nickName}}</text>
			   			    	<text style="flex-direction: inherit;font-size: 28rpx;margin-top: 10rpx;">{{item.content}}</text>
			   			   </view>
						   
			   </view>
			   
			      <view style="display: flex;">
					  <text @click="hidePraiseComment" style="margin-left: 168rpx;color: #C0C0C0;margin-top: 10rpx;">{{item.time}}</text>
					 
					 
					  <view v-if="item.showPraise" style="background-color: #333333;margin-left: 50rpx;
					  text-align: center;float: right;flex: 1;
					  line-height: 70rpx;border-radius: 10rpx;">
						  <image  style="width: 28rpx;height: 28rpx;margin-right: 10rpx;" src="../../../../static/xinzan.png"></image>
						  <text v-if="!item.praised" @click="praise(item)" style="margin-top: 10rpx;color: white;">点赞</text>
						  <text v-else @click="unPraise(item)" style="margin-top: 10rpx;color: white;">取消</text>
						  <image  style="width: 28rpx;height: 28rpx;margin-left: 30rpx;" src="../../../../static/whitepl.png"></image>
						  <text style="margin-top: 10rpx;color: white;margin-left: 10rpx;" @click="comment(item)">评论</text>
					  </view>
					  
					  
					  <button  class="pracom" type="default" @click="openPraiseComment(item)">
					  					  ..
					  </button>
					 
				  </view>
			   <view v-if="item.praiseList.length>0" style="background-color: #f3f3f3;line-height: 60rpx;
			   margin-bottom: 20rpx;
			   margin-left: 168rpx;border-radius: 10rpx;">
			   	 <image style="width: 40rpx;height: 40rpx;margin-top: 15rpx;margin-left: 10rpx;margin-right: 10rpx;" src="../../../../static/aixin.png"></image>
			       <template v-for="(praiseUser,index) in item.praiseList">
					    <text style="color: #55aaff;">{{praiseUser.nickName}}</text>
					    <text v-if="index!=(item.praiseList.length-1)" style="color: #808080;">，</text>
				   </template>
			   </view>
			   
			   
			   <view v-if="item.commentList.length>0" style="background-color: #efefef;line-height: 60rpx;
			   margin-bottom: 20rpx;
			   margin-left: 168rpx;border-radius: 10rpx;">
			   	   
			       <view @longpress="commentHandle(commentObj,item)" style="padding: 10rpx;" v-for="(commentObj,index) in item.commentList">
			   					    <text style="color: #55aaff;">{{commentObj.nickName}}</text>:
			   					    <text  style="font-weight: 500;margin-left: 12rpx;">{{commentObj.comment}}</text>
			   				   </view>
			   </view>
			   
			
			    <view  @click="hidePraiseComment" style="width: 99%;height: 1rpx;margin: auto;background-color: #F1F1F1;"></view>
			    <view  @click="hidePraiseComment" style="width: 99%;height: 1rpx;background-color: #F1F1F1;margin: auto;"></view>
		   </view>
		 
	  
		   <view v-if="commentStart" style="width: 100%;bottom: 0;position: fixed;">
			   <view class="input-panel">
			          <input type="text" @focus="getInputFocus" v-bind:value="inputContent" @input="changeInputContent" class="send-input"></input>
			          <view  v-on:tap="emojiCheck"  class="send-emoji iconfont iconsmile" >😀</view>  
			          <button   @touchend.prevent="sendPyqComment" class="send-btn">发送</button>     
			           
			   </view>
			   
			   <view v-if="sendEmoji" class="emoji_view">
			   			  <scroll-view class="emojis_scroll" scroll-x="false" scroll-y="true">
			   				<view class="emoji" v-for="(item,index) in emoji" :data-name="item" v-on:tap="_emojiItem" >
			   					 <text>{{item}}</text>
			   				</view>
			   			  </scroll-view>
			   </view>
			   
		   </view>
	   </scroll-view>
	
	  <view>
		  <modal :show="showDailog" type="center" :custom="true" :mask-click="false" @change="change">
		             <view class="uni-tip" @click.stop="interior">
		                  <button @click="copyComment" style="background: none;">复制</button>
		                  <button @click="deleteComment" style="background: none;" v-if="loginId==currentComment.userId">删除</button>
		                  <button style="background: none;">搜一搜</button>
		             </view>
		         </modal>
	  </view>
	</view>
	
</template>

<script>
	import data from '../../../../common/data.js'
	import http from '../../../../common/request.js'
	import modal from '../../../../common/modal.vue'
	export default {
		components:{
			modal
		},
		onLoad() {
			this.userinfo=uni.getStorageSync('userKey')
			this.loginId=uni.getStorageSync('userKey').id
			if(this.userinfo.pyqBackground==undefined){
				this.userinfo.pyqBackground="../../../../static/pyqbeijing.png";
			}
			this.getPyqList()
		},
		data() {
			return {
				loginId:undefined,
				showDailog:false,
				 content:'',
				commentStart:false,
				userinfo:{},
			    sendEmoji:false,
				pyqList:[],
				currentItem:{},
				currentComment:{},
				inputContent:'',
				currentCircleId:undefined,
				emoji:[
				  '😀','😁','😂','😃','😄','😅','😆','😉','😇','😐','😑','😶','😏','😣','😥','😮','😯',
				  '😊','😋','😎','😍','😘','😗','😙','😚','😨','😬','😰','😱','😳','😵','😡','😠','😧',
				  '😪','😫','😴','😌','😛','😜','😝','😒','😓','😔','😕','😲','😷','😖','😞','😟','😤','😢','😭','😦'],
				
			}
		},
		methods: {
			onNavigationBarButtonTap:function(e){
			 console.log(e.title)
			 if('fpyq'===e.title){
				 uni.navigateTo({
				 	url:'./fpyq'
				 })
			  }
		  },
			goUserHome(){
				alert(123)
			},
			commentHandle(commentObj,item){
				this.showDailog = true
				this.currentComment = commentObj
				this.currentItem = item
			},
			interior(){
				this.showDailog = false
			},
			openPraiseComment(item){
				
				for (let i = 0; i < this.pyqList.length; i++) {
					let obj = this.pyqList[i]
					if(item.id!=obj.id){
						obj.showPraise=false
					}
				}
				item.showPraise=!item.showPraise
			},
			praise(item){
				item.praised=true
				 const user =uni.getStorageSync('userKey')
				let data = {}
				data.nickName=user.name
				data.id=user.id
				data.imgHead=user.imgHead
				item.praiseList.push(data)
				this.praisePyq(item)
				this.hidePraiseComment()
			},
			emojiCheck(){
			  if(this.sendEmoji){
			      this.sendEmoji=false
			  }else{
			     this.sendEmoji=true
			  }
			},
			_emojiItem(e){
			    let msg= e.currentTarget.dataset.name;
				this.inputContent = this.inputContent+msg
			},
			unPraise(item){
				item.praised=false
				let praiseListNew = []
			    const uid =uni.getStorageSync('userKey').id
				for (let i = 0; i < item.praiseList.length; i++) {
					 let obj = item.praiseList[i]
					if(obj.id!=uid){
						praiseListNew.push(obj)
					}
				}
				item.praiseList=praiseListNew
				this.hidePraiseComment()
				this.unPraisePyq(item)
			},
			comment(item){
				this.currentCircleId=item.id
				this.commentStart = true
				this.currentItem = item
				item.showPraise=false
			},
			getInputFocus(){
				this.sendEmoji=false
			},
			async praisePyq(item) {
					const res = await http.request({
						url: '/friend_circle_praise/praise?circleId='+item.id,
						method:'POST',
						data:{}
					})
					if(res.data.code==0){
					
					}
			},
			async unPraisePyq(item) {
					const res = await http.request({
						url: '/friend_circle_praise/un_praise?circleId='+item.id,
						method:'POST',
						data:{}
					})
					if(res.data.code==0){
					
					}
			},
			
			hidePraiseComment(){
				for (let i = 0; i < this.pyqList.length; i++) {
					let obj = this.pyqList[i]
					obj.showPraise=false
				}
			},
			scrollBegin(event){
				this.currentCircleId=undefined
				this.currentItem={}
				this.commentStart=false
				this.inputContent=''
			},
			updatePyqBackgrond(){
				uni.chooseImage({
					count:1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: (res) => {
						uni.uploadFile({
						            url: data.api+'/sys_user/change_pyq_background', //仅为示例，非真实的接口地址
						            filePath: res.tempFilePaths[0],
						            name: 'file',
									header:{authorization:uni.getStorageSync('authorization')},
						            success: (uploadFileRes) => {
										this.userinfo.pyqBackground=JSON.parse(uploadFileRes.data).pyqBackground
										uni.setStorageSync('userKey',this.userinfo)
						            },
						        });
					}
				})
				
				this.hidePraiseComment()
			},
			
			
			
			async getPyqList() {
					const res = await http.request({
						url: '/friend_circle/list_pyq',
						method:'POST',
						data:{}
					})
				if(res.data.code==0){
					 this.pyqList = res.data.data
				}
				
			},
			changeInputContent(e) {
			    this.inputContent=e.detail.value
			},
			sendPyqComment(){
				if(this.inputContent==''){
					uni.showToast({
						title:'评论不能为空！'
					})
					return false
				}
				this.commentStart=false
				this.sendEmoji=false
				
				this.publishPyqComment()
			},
			
			
			async publishPyqComment() {
					const res = await http.request({
						url: '/friend_circle_comment/add_pyq_comment?circleId='+this.currentCircleId+'&comment='+this.inputContent,
						method:'POST',
						data:{}
					})
					if(res.data.code==0){
						let obj = {}
						obj.comment=this.inputContent
						obj.id=res.data.data.id
						obj.userId=uni.getStorageSync('userKey').id
						obj.nickName=uni.getStorageSync('userKey').name
						obj.circleId=this.currentItem.id
						this.currentItem.commentList.push(obj)
					}
			},
			
			
			change(){
				
			},
			copyComment(){
				uni.setClipboardData({
					data:this.currentComment.comment,
					success: (res) => {
						uni.showToast({
							title:'复制成功！'
						})
					}
				})
			},
			deleteComment(){
				let commentList = []
				let oldCommentList = this.currentItem.commentList
				for (let i = 0; i < oldCommentList.length; i++) {
					let obj = oldCommentList[i]
					if(obj.id!=this.currentComment.id){
						commentList.push(obj)
					}
				}
				this.currentItem.commentList=commentList
				this.deletePyqComment()
			},
			
			async deletePyqComment() {
					const res = await http.request({
						url: '/friend_circle_comment/delete_pyq_comment?id='+this.currentComment.id,
						method:'POST',
						data:{}
					})
					if(res.data.code==0){
						
					}
			},
			
			
		}
	}
</script>

<style>
	.page-wrap {
	  display: flex;
	  flex-direction: column;
	  background: #ebebeb;
	  position: absolute;
	  top: 0;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  overflow: hidden;
	}
 .assistant_ly{
	 margin-left: 10rpx;
	 font-weight: bold;
     display:flex;
     flex-direction:column;
     border-radius: 50rpx;
     background-color: white;
   }
 .line{
   	width: 100%;
   	height: 5rpx;
   }
   .pracom{
	   width: 100rpx;
	   margin-right: 10rpx;
	   margin-bottom: 10rpx;
	   height: 60rpx;
	   text-align: center;
	   align-items: center;
	   line-height: 5rpx;
	   font-size: 90rpx;
	   color: #808080;
   }
   
   .emojis_scroll{
     display: block;
     float: left;
     width: 100%;
     height: 400rpx;
     padding-left: 25rpx;
   }
   
   .emoji{
     display: block;
     float: left;
     width: 100rpx;
     height: 100rpx;
     font-size: 70rpx;
     text-align: center;
   }
   
   
   
   .emoji_view{
     box-sizing: border-box;
     padding: 13rpx 20rpx 0;
     background: #f5f5f7;
     border-top:#d7d7d9 1rpx solid;
     box-sizing: border-box;
     display: flex;
   }
   .input-panel {
     height: 100rpx;
     box-sizing: border-box;
     padding: 13rpx 20rpx 12rpx 12rpx;
     background: #f5f5f7;
     border-top:#d7d7d9 1rpx solid;
     box-sizing: border-box;
     display: flex;
   }
   .send-input {
     flex: 1;
     height: 72rpx;
     background: #fff;
     border:#ddd 1rpx solid;
     border-radius: 3px;
     margin-right: 20rpx;
     box-sizing: border-box;
     padding: 0 10rpx;
   }
   .send-btn {
     text-align: center;
     height: 72rpx;
     background-color: #a0e75a;
     font-size: 28rpx;
   }
   
   .send-emoji {
     height: 72rpx;
     font-size: x-large;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   
    .uni-tip {
           padding: 15px;
           width: 120px;
           background: #fff;
           box-sizing: border-box;
           border-radius: 1rpx;
       }
   
       .uni-tip-title {
           text-align: center;
           font-weight: bold;
           font-size: 16px;
           color: #333;
           text-align: left;
       }
   
       .uni-tip-content {
           padding: 15px;
           font-size: 14px;
           color: #666;
           /* background: #C8C7CC; */
           border:2upx solid #ccc;
           border-radius: 10upx;
       }
       
       .uni-tip-content-textarea{
           height: 300upx;
           width: 100%;
           text-align: left;
       }
       .uni-tip-group-button {
           margin-top: 10px;
           display: flex;
       }
       .uni-tip-group-button>button{
           font-size:24upx;
           height: 40upx;
           line-height: 40upx;
           
       }
	   button:after {  
	       border: none;  
	   }
</style>
